<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="语音讲解" name="1"></el-tab-pane>
      <!-- <el-tab-pane label="一级导游讲解" name="2"></el-tab-pane> -->
    </el-tabs>
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="所属景区" prop="scenicId">
        <el-select
          v-model="queryParams.scenicId"
          placeholder="请选择"
          filterable
          clearable
        >
          <el-option
            v-for="item in regList"
            :key="item.id"
            :label="item.scenicName"
            :value="item.id"
            style="width: 350px"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="景点名称" prop="scenicName">
        <el-input
          v-model="queryParams.scenicName"
          placeholder="请输入名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" clearable placeholder="请选择状态">
          <el-option label="上线" value="1"></el-option>
          <el-option label="下线" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-plus" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="scenicAreaList" stripe style="width: 100%">
      <el-table-column prop="name" label="所属景区"></el-table-column>
      <el-table-column prop="id" label="景点id" >
      </el-table-column>
      <el-table-column prop="scenicName" label="景点名称" >
      </el-table-column>
      <el-table-column prop="longitude" label="经度" >
      </el-table-column>
      <el-table-column prop="latitude" label="纬度">
      </el-table-column>
      <el-table-column prop="sort" label="排序">
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1">上线</span>
          <span v-if="scope.row.status == 0">下线</span>
        </template>
        
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" >
      </el-table-column>
      <el-table-column prop="updateTime" label="修改时间"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="editRow(scope.row)" type="text" size="small"
            >修改</el-button
          >
          <el-button
            type="text"
            size="small"
            @click.native.prevent="deleteRow(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="getList"
    />
    <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col>
            <el-form-item label="所属景区" prop="scenicId">
              <el-select
                v-model="form.scenicId"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option
                  v-for="item in regList"
                  :key="item.id"
                  :label="item.scenicName"
                  :value="item.id"
                  style="width: 350px"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col >
            <el-form-item label="景点名称" prop="scenicName">
              <el-input
                v-model="form.scenicName"
                placeholder="请输入景点名称"
              />
            </el-form-item>
          </el-col>
          <el-col >
            <el-form-item label="纬度" prop="latitude">
              <el-input v-model="form.latitude" placeholder="请输入纬度" />
            </el-form-item>
          </el-col>
          <el-col >
            <el-form-item label="经度" prop="longitude">
              <el-input v-model="form.longitude" placeholder="请输入经度" />
            </el-form-item>
          </el-col>
          <el-col >
              <el-button type="primary" @click="toAddress" style="margin-left: 80px;margin-bottom: 20px">点击跳转到获取经纬度</el-button>
          </el-col>
          <el-col >
            <el-form-item label="排序" prop="sort">
              <el-input-number v-model="form.sort" :step="1" :precision="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col >
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio :label="1">上线</el-radio>
                <el-radio :label="0">下线</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col >
            <el-form-item label="是否试听" prop="isAudition">
              <el-radio-group v-model="form.isAudition">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col >
            <el-form-item label="图片上传">
              <ImageUpload :parfileList = fileList :getFileList="getFileList"></ImageUpload>
            </el-form-item>
          </el-col>
          <el-col >
            <el-form-item label="音频上传">
              <AudioUpload :parfileList = audioList :getAudioList="getAudioList"></AudioUpload>
            </el-form-item>
          </el-col>
          <el-col >
            <el-form-item label="景点描述">
              <editor v-model="form.remark" :min-height="192" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listScenicArea,
  addScenicArea,
  editScenicArea,
  getScenicArea,
  deleteScenicArea,
} from "@/api/system/scenicArea";

import { getAllRegList } from "@/api/system/scenic";

export default {
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      loading: true,
      total: 0,
      scenicAreaList: [],
      regList: [],
      activeName: "1",
      queryParams: {
        current: 1,
        size: 10,
        scenicName: undefined,
        status:undefined,
      },
      // 表单参数
      form: {},
      title: "",
      fileList: '',
      audioList: [],
      open: false,
      // 表单校验
      rules: {
        scenicName: [
          { required: true, message: "景区名称不能为空", trigger: "blur" },
        ],
        remark: [
          { required: true, message: "景区介绍不能为空", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.getAllList();
  },
  methods: {
    getList() {
      this.loading = true;
      listScenicArea({
        ...this.queryParams,
        language: Number(this.activeName),
      }).then((response) => {
        if (response) {
          this.scenicAreaList = response.data?.records;
          this.total = response.data?.total;
          this.loading = false;
        }
      });
    },
    reset() {
      this.form = {
        id: undefined,
        scenicId: undefined,
        scenicName: undefined,
        remark: undefined,
        longitude: undefined,
        latitude: undefined,
        status:1,
      };
      this.audioList = [];
      this.fileList = '';
      this.resetForm("form");
    },
    handleQuery() {
      this.queryParams.current = 1;
      this.getList();
    },
    handleTabClick(tab, event) {
      this.getList();
    },
    getAllList() {
      getAllRegList().then(response => {
        this.regList = response.data;
      });
    },
    editRow(row) {
      this.reset();
      const id = row.id;
      getScenicArea({ id: id }).then((response) => {

        this.form = response.data;
        this.audioList = response.data.audioList,
        this.fileList = response.data.images
        this.open = true;
        this.title = "修改景点介绍";
      });
    },
    deleteRow(row) {
      const id = row.id;
      this.$modal
        .confirm("是否确认删除该景点？")
        .then(function () {
          return deleteScenicArea({ id: id });
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加景点介绍";
    },
    onFileChange(file, fileList) {
      this.fileList = fileList.join(',');
    },
    onAudioChange(file, fileList) {
      this.audioList = fileList;
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = {
              ...this.form,
              images: this.fileList,
              audioList: this.audioList,
              language: Number(this.activeName),
            };
          if (this.form.id != undefined) {
            editScenicArea(params).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {  
            addScenicArea(params).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    getFileList(res){
      this.fileList = res
    },
    getAudioList(res){
      this.audioList = res
    },
    toAddress(){
      window.open('https://lbs.qq.com/tool/getpoint/get-point.html', '_blank')
    }
  },
};
</script>

<style></style>
